<template>
	<div class="ShopAccount">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }"><i class="lh lh-diaodu fw_100"></i></el-breadcrumb-item>
			<el-breadcrumb-item>帮助中心</el-breadcrumb-item>
			<el-breadcrumb-item>banner管理</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15 pl_10 pr_10">
			<div>
				<h4 class="border-bottom pb_10">{{ this.$route.query.sn ? '编辑banner' : '新增banner' }}</h4>
			</div>
			<div class="pt_10">
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>banner名称</div>
					<div class="fl list-cont">
						<el-input v-model="formData.name"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>应用</div>
					<div class="fl list-cont">
						<el-select v-model="formData.channel" @change="channelChange()">
							<el-option
								:label="item.name"
								:value="item.channel"
								v-for="(item, index) in channelGetlist"
								:key="index"
							></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i><span>banner内容</span></div>
					<div class="fl list-cont" style="display: flex;">
						<uploadedit pic_name="'image'" :pic_url="formData.image" @func="img5"></uploadedit>
						<span style="margin-left: 10px;">备注：banner图片大小，690px * 230px</span>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>排序</div>
					<div class="fl list-cont">
						<el-input v-model="formData.sorts"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>城市</div>
					<div class="fl list-cont">
						<el-select v-model="formData.city_id">
							<el-option
								:label="item.city_name"
								:value="item.id"
								v-for="(item, index) in cityList"
								:key="index"
							></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>跳转地址</div>
					<div class="fl list-cont" style="display: flex; flex-direction: row;">
						<el-select v-model="formData.url_type">
							<el-option label="小程序" value="1"></el-option>
							<el-option label="H5" value="2"></el-option>
						</el-select>
						<el-input v-model="formData.url" style="margin-left: 10px;"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>用户类型</div>
					<div class="fl list-cont">
						<el-radio v-model="formData.work_type" label="1,2">全部</el-radio>
						<el-radio v-model="formData.work_type" label="1">兼职</el-radio>
						<el-radio v-model="formData.work_type" label="2">全职</el-radio>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>位置</div>
					<div class="fl list-cont">
						<el-select v-model="formData.position">
							<el-option
								:label="item.name"
								:value="item.key"
								v-for="(item, index) in positionList"
								:key="index"
							></el-option>
						</el-select>
						<span style="margin-left: 10px;">注意：应用不同，可选位置不同</span>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>上架时间</div>
					<div class="fl list-cont">
						<el-date-picker
							type="datetime"
							v-model="formData.time_start"
							placeholder="选择日期"
							value-format="yyyy-MM-dd HH:mm:ss"
							default-time="00:00:00"
						></el-date-picker>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>下架时间</div>
					<div class="fl list-cont">
						<el-date-picker
							type="datetime"
							v-model="formData.time_end"
							placeholder="选择日期"
							value-format="yyyy-MM-dd HH:mm:ss"
							default-time="23:59:59"
						></el-date-picker>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin"></i><span>备注</span></div>
					<div class="fl list-cont">
						<el-input type="textarea" :rows="4" :cols="30" placeholder="" v-model="formData.remark"></el-input>
					</div>
				</div>
			</div>
			<div class="ml_110 mt_80">
				<span class="resetBtn mr_10" @click="back">返回</span>
				<span class="btnOK" @click="submitBtn">保存</span>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { fetchCityList } from '@/api/city.js'
import { appChannelGetlist, getAppPositionList, createBanner, setInfoBanner, getInfoBanner } from '@/api/banner.js'

export default {
	name: 'BannerAdd',
	data() {
		return {
			//表单数据
			formData: {
				name: '',
				channel: '',
				image: '',
				sorts: '',
				city_id: '',
				url_type: '',
				url: '',
				work_type: '',
				time_start: '',
				time_end: '',
				position: '',
				remark: ''
			},
			channelGetlist: [],
			positionList: [],
			cityList: []
		}
	},
	async created() {
		await this.fetchAppChannelGetlist()
		await this.fetchCitylist()
		if (this.$route.query.sn) {
			this.getInfo(this.$route.query.sn)
		}
	},
	mounted() {},
	methods: {
		async submitBtn() {
			try {
				if (
					this.formData.name == '' ||
					this.formData.channel == '' ||
					this.formData.image == '' ||
					this.formData.sorts == '' ||
					this.formData.city_id == '' ||
					this.formData.url_type == '' ||
					this.formData.url == '' ||
					this.formData.work_type == '' ||
					this.formData.time_start == '' ||
					this.formData.time_end == '' ||
					this.formData.position == ''
				) {
					this.$message.error('请输入必填项！')
					return
				}

				let { sorts, ...query } = this.formData

				if (this.$route.query.sn) {
					let ret = await setInfoBanner({
						sn: this.$route.query.sn,
						sort: sorts,
						...query
					})
				} else {
					let ret = await createBanner({ ...query, sort: sorts })
				}
				this.$message.success(this.$route.query.sn ? '编辑成功！' : '新增成功！')
				this.back()
			} catch (err) {
				console.log(err)
			}
		},
		async getInfo(sn) {
			try {
				let ret = await getInfoBanner({
					sn: sn
				})

				for (const key in this.formData) {
					if ('' + key == 'city_id') {
						this.formData[key] = +ret[key]
					} else if ('' + key == 'sorts') {
						this.formData[key] = '' + ret['sort']
					} else {
						this.formData[key] = '' + ret[key]
					}
				}
				this.fetchAppPositionList()
			} catch (err) {
				console.log(err)
			}
		},
		back() {
			//返回
			this.$router.go(-1)
		},
		async fetchAppChannelGetlist() {
			try {
				let ret = await appChannelGetlist()
				this.channelGetlist = ret.list
			} catch (err) {
				// console.log(err)
			}
		},
		async fetchAppPositionList() {
			try {
				let ret = await getAppPositionList({
					channel: this.formData.channel,
					type: 'banner'
				})
				this.positionList = ret.list
			} catch (err) {
				// console.log(err)
			}
		},
		channelChange() {
			this.formData.position = ''
			this.fetchAppPositionList()
		},
		async fetchCitylist() {
			try {
				let ret = await fetchCityList()
				this.cityList = ret.list
			} catch (err) {}
		},
		img5(data) {
			// console.log(data);
			this.formData.image = data
		}
	}
}
</script>

<style scoped>
.personnelAdd {
	margin: 15px 15px 0 15px;
}
.row-info {
	padding: 10px 0;
}
.resetBtn,
.btnOK {
	padding: 0 30px;
}
.title-key {
	width: 100px;
}
.list-cont img {
	width: 128px;
}

.r-90 {
	transform: rotate(-90deg);
}
.r180 {
	transform: rotate(180deg);
}
.r90 {
	transform: rotate(90deg);
}
.avatar {
	position: relative;
	top: -80px;
	left: 50px;
	width: 100px !important;
}
.dingwei {
	font-size: 26px;
	color: var(--btn);
}
</style>



// WEBPACK FOOTER //
// src/components/banner/BannerAdd.vue